<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/auth_interceptor.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">学生列表</b>
    <div style="float: right;">
        <!-- TODO:添加操作的入口 -->
        <el-button type="primary" @click="showAddStu">添加学生</el-button>
    </div>
    <!-- TODO: 分页查询结果展示的表格 -->
    <el-table :data="tableData">
        <el-table-column prop="number" label="学号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="birthday" label="生日" width="140"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" width="180">
            <!-- slot-scope="props": 行的作用范围
                 props.row: 获取当前行中的数据信息
             -->
            <template slot-scope="props">
                <el-button type="warning" @click="showEditStu(props.row.number)">编辑</el-button>
                <el-button type="danger" @click="deleteStu(props.row.number)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
    <!-- TODO: 添加学生信息的模态框 -->
    <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="formData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStu()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- TODO: 修改学生信息的模态框 -->
    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="editFormData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="updateStu()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加学生信息的窗口显示状态
            dialogTableVisible4edit: false, //编辑学生信息的窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            // 分页条使用的数据信息
            pagination: {
                currentPage: 1, // 当前页码
                pageSizes: [3, 5, 8, 11, 50, 100], // 自定义每页显示条数
                pageSize: 3, // 当前使用的 每页显示条数
                total: 0 // 总条数
            },
            rules: {
                number: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                birthday: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods: {
            //TODO:改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                console.log(pageSize);
                // 将改变后的值赋给每页显示的条数
                this.pagination.pageSize = pageSize;
                // 调用selectByPage完成分页查询
                this.selectByPage();
            },
            //TODO:改变页码时执行的函数
            handleCurrentChange(currentPage) {
                //alert(pageNum)
                this.pagination.currentPage = currentPage;
                // 调用selectByPage完成分页查询
                this.selectByPage();
            },
            // 展示添加学生信息的对话框
            showAddStu() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            // 重置表单的函数
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            // 用于添加学生信息
            addStu() {

            },
            // 用于修改时回显被修改的数据信息
            showEditStu(row) {

            },
            // 修改学生信息
            updateStu() {

            },
            // 根据学号删除学生信息
            deleteStu(number) {

            },
            // TODO:用于分页查询
            selectByPage() {
                // 发送axios请求,用于分页查询学生信息
                axios.get(`/student?method=selectStudentByPage`,{
                    params:{
                        currentPage:this.pagination.currentPage,
                        pageSize:this.pagination.pageSize,
                    }
                }).then(resp=>{
                    //alert(resp.data);
                    console.log(resp.data);
                    // 获取服务器返回的pbjson对象
                    let result = resp.data;
                    let pb = result.data;
                    // 获取响应的学生数据信息
                    this.tableData = pb.list;
                    // 获取当前页页码
                    this.pagination.currentPage = pb.currentPage;
                    // 获取每页显示条数
                    this.pagination.pageSize = pb.pageSize;
                    // 获取总条数
                    this.pagination.total = pb.totalCount;
                });
            }
        },
        created() {
            // vue对象创建成功后,调用selectByPage函数,完成分页查询学生信息
            this.selectByPage();
        }
    });
</script>
</html>